import { ProCard } from '@ant-design/pro-components';
import { Button, message, Space } from 'antd';
import axios from 'axios';
import dayjs from 'dayjs';
import 'dayjs/locale/zh-cn';
import { useState } from 'react';
import JsonInput from './JsonInput';
import styles from './index.less';

const HomePage: React.FC = () => {
  const [text, setText] = useState('DEPT_ID^^注释^^char(50)');
  const [src_lang, setSrcLang] = useState('DEPT_ID^^注释^^char(50)');
  const [ans, setAns] = useState('');
  const fetch = async (url: string, [key = 'text', key2 = 'src_lang'] = [], [retKey = 'translated_text'] = []) => {
    return axios
      .post(
        `/mainApi${url}`,
        { [key]: text, [key2]: src_lang },
        {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8',
          },
        },
      )
      .then((ret) => {
        const { status, data } = ret || {};
        if (status === 200) {
          setAns((data || {})[retKey]);
        } else {
          return Promise.reject(new Error('操作失败，查看后台报错日志！'));
        }
      })
      .catch((error) => {
        message.error(error.toString());
      });
  };
  return (
    <ProCard
      gutter={[16, 16]}
      title={
        <div className={styles.title}>
          <span>小成智能转码工具</span>
          <div className={styles.sub_title}>@V1.7-1213</div>
        </div>
      }
    >
      <ProCard
        headerBordered
        bordered
        split="horizontal"
        colSpan="40%"
        style={{ borderRadius: 0 }}
        actions={
          <Space size={8} wrap style={{ padding: 8 }}>
            <Button type="primary" onClick={async () => fetch('/translate')}>
              智能-生成SQL语句
            </Button>
            <Button type="primary" onClick={async () => fetch('/translate20')}>
              智能-生成SQL语句2.0
            </Button>
            <Button type="primary" onClick={async () => fetch('/replace')}>
              通用-Replace
            </Button>
            <Button type="primary" onClick={async () => fetch('/casewhen')}>
              通用-CaseWhen
            </Button>
            <Button type="primary" onClick={async () => fetch('/2doris')}>
              通用-DDL2Doris
            </Button>
            <Button type="primary" onClick={async () => fetch('/yong')}>
              定制-勇哥专属
            </Button>
            <Button type="primary" onClick={async () => fetch('/dianzibingli')}>
              通用-电子病历解析
            </Button>
            <Button type="primary" onClick={async () => fetch('/ddlwithformat', ['soucre', 'rules'])}>
              通用-DDL格式化
            </Button>
            <Button type="primary" onClick={async () => fetch('/sqlbeauty', ['soucre', 'rules'], ['beauty_text'])}>
              通用-SQL美化
            </Button>
          </Space>
        }
      >
        <ProCard
          title="SQL文本【目标】【单模块输入】【电子病例XML】："
          bodyStyle={{ padding: 0 }}
          headerBordered
          style={{ borderRadius: 0 }}
        >
          <JsonInput value={text} onChange={setText} height={300} />
        </ProCard>
        <ProCard title="SQL文本2【源】：" bodyStyle={{ padding: 0 }} headerBordered style={{ borderRadius: 0 }}>
          <JsonInput value={src_lang} onChange={setSrcLang} height={300} />
        </ProCard>
      </ProCard>
      <ProCard
        bordered
        colSpan="40%"
        title="获取ETL脚本"
        headerBordered
        bodyStyle={{ padding: 0 }}
        style={{ borderRadius: 0 }}
      >
        <JsonInput value={ans} onChange={setAns} height={800} />
      </ProCard>
      <ProCard
        colSpan="20%"
        bordered
        title={dayjs().locale('zh-cn').format('YYYY年MM月DD日  dddd')}
        style={{ borderRadius: 0 }}
        headerBordered
      >
        <Space direction="vertical">
          <div style={{}}>2023.11.12: 发布V1.0 版本，实现多表字段智能匹配，并生成参考SQL。</div>
          <div>2023.12.04：发布V1.1版本，增加SQL语句2.0，引入机器学习word2vec相似度算法，实现近义词同义词匹配。</div>
          <div>2024.01.12：发布V1.2 版本，增加 replace、case when 语句生成规则功能。</div>
          <div>
            2024.02.01：发布V1.3 版本，优化HIVE DDL 语句到DOIRS的脚本，文本输入DDL语句点击DDL-to-Doris一键生成转换SQL。
          </div>
          <div>2024.05.21：发布V1.4 版本，SQL生成模块，标识字段是否为关键字段，建议用Y（YES）与N（NO）区分。</div>
          <div>2024.06.13：发布V1.5 版本，电子病例在线解析，通用规则。</div>
          <div>2024.08.16：发布V1.6 版本，DDl解析与格式化，支持doris、hive、mysql、oracle。</div>
          <div>2024.12.13：发布V1.7 版本，SQL美化功能，支持基础语法检查。</div>
          <div> 问题及建议反馈邮箱：chenwen@cowinhealth.com</div>
        </Space>
      </ProCard>
    </ProCard>
  );
};

export default HomePage;
